<template>
	<el-dialog :visible.sync="visible" v-bind="dialogConfig" :title="dialogTitle" :custom-class="customClass">
		<template slot="title" v-if="!!$slots.title">
			<slot name="title"></slot>
		</template>
		<slot></slot>
		<template slot="footer" v-if="!!$slots.footer">
			<slot name="footer"></slot>
		</template>
	</el-dialog>
</template>

<script>
export default {
	name: 'swFormFrame',
	props: {
		value: { type: Boolean, default: false },
		type: { type: String, default: '' },
		title: { type: String, default: '' },
		width: { type: String, default: '640px' },
		subfield: { type: Boolean, default: false }
	},
	data() {
		return {
			visible: this.value,
			dialogConfig: {
				top: '0',
				width: this.width,
				appendToBody: true
			}
		};
	},
	computed: {
		dialogTitle() {
			if (this.type === 'add') {
				return `新增${this.title}`;
			} else if (this.type === 'addSub') {
				return `新增子${this.title}`;
			} else if (this.type === 'edit') {
				return `修改${this.title}`;
			} else if (this.type === 'detail') {
				return `${this.title}详情`;
			} else {
				return this.title;
			}
		},
		customClass() {
			let baseClass = 'system_dialog_wrapper';
			return `${baseClass} ${!this.subfield ? '' : ' subfield_wrapper'}`;
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
		}
	}
};
</script>
<style lang="scss">
.system_dialog_wrapper.el-dialog {
	.el-dialog__body {
		padding: 22px 22px 0;
	}
	&.subfield_wrapper .el-dialog__body {
		padding: 0;
	}
}
</style>
